<template>
    <div class="welcome-container">
        <h1 class="title">{{ greeting }}，{{ name }}！</h1>
        <p class="subtitle">现在是：{{ currentTime }}</p>
    </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

const currentTime = ref<string>('')
const greeting = ref<string>('你好')
const name = ref<string>('developer')

// 更新当前时间和问候
const updateTimeAndGreeting = () => {
    const now = new Date()
    const hours = now.getHours()
    currentTime.value = now.toLocaleTimeString()

    if (hours < 12) {
        greeting.value = '早上好'
    } else if (hours < 18) {
        greeting.value = '下午好'
    } else {
        greeting.value = '晚上好'
    }
}

onMounted(() => {
    updateTimeAndGreeting()
})
</script>

<style scoped lang="less">
.welcome-container {
    padding: 24px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;

    .title {
        font-size: 24px;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .subtitle {
        font-size: 16px;
        color: #666;
    }
}
</style>
